<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate style="float: left;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<div>
			<div style="float: left">
				<span style="font-size: 13px;font-weight: bold">检索字段</span>
				<el-select size="small" v-model="value" placeholder="请选择查询方式" style="width: 80px;margin-right: 2px">
					<el-option label="名称" :value="0"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">关键字</span>
				<el-input size="small" style="width: 160px;" class="inline-input" v-model="searchModel" placeholder="馆藏地名称查询">
					<el-button id="searchLocationData" slot="append" icon="search" @click="searchDatas"></el-button>
				</el-input>
			</div>
			<div class="block" style="text-align:right;float: right">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column type="selection" align="center" width="50px"></el-table-column>
			<el-table-column label="名称" align="center" prop="Name"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="CreateTime"></el-table-column>
			<el-table-column label="创建人" align="center" prop="CreateUid"></el-table-column>
			<el-table-column label="更新时间" align="center" prop="UpdateTime"></el-table-column>
			<!-- <el-table-column label="操作人" align="center" prop="UpdateUid"></el-table-column> -->
			<el-table-column :label="$t('message.operation')" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="locationDetail(scope.row)">
						<li class="el-icon-information el-icon--left"></li>详情
					</el-button>
					<el-button @click="editLocation(scope.row)" type="primary" size="small">
						<i class="el-icon-edit el-icon--left"></i>编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align: right; margin-bottom: 100px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!--创建馆藏地-->
		<el-dialog title="创建馆藏地" v-model="createDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form ref="createLocationForm" :model="createLocationForm" :rules="createRules" label-width="100px">
				<el-form-item label="馆藏地名称" prop="name">
					<el-input v-model="createLocationForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmCreate('createLocationForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--修改馆藏地名称-->
		<el-dialog title="修改馆藏地信息" v-model="editDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form ref="editLocationForm" :model="editLocationForm" :rules="createRules" label-width="100px">
				<el-form-item label="馆藏地名称" prop="name">
					<el-input v-model="editLocationForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmEdit('editLocationForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
				//回车触发查询按钮
				document.onkeydown = function(event) {
					var e = event || window.event;
					if(e && e.keyCode == 13) { //回车键的键值为13
						$("#searchLocationData").click(); //调用登录按钮的登录事件
					}
				};
				return {
					isReload: false,
					loading: false,
					tableData: [],
					createDialog: false,
					editDialog: false,
					value: 0, //搜索
					searchModel: '',
					currentPage: 1,
					pageSize: 10,
					totalSize: 0,
					createLocationForm: {
						name: ''
					},
					editLocationForm: {
						name: '',
						keyid: ''
					},
					createRules: {
						name: [{
							required: true,
							message: "名称不能为空",
							trigger: 'blur'
						}]
					},
					multipleSelection: [],
					opreateDatas: [
					{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},  
					{
						size: "small",
						type: "primary",
						icon: "el-icon-plus el-icon--left",
						name: "添加",
						action: "createLocation"
					},
					// {
					// 	size: 'small',
					// 	type: 'primary',
					// 	icon: 'el-icon-eleg-icon_link el-icon--left',
					// 	name: '绑定区域',
					// 	action: 'bindDistrict'
					// },
					{
						size: "small",
						type: "danger",
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "deleteLocation"
					}
					],
				}

			},
			props: {
				templateObj: {
					type: Object,
					default: function() {
						return {};
					}
				}
			},
			methods: {
				executeAction(action) {
					if(action) {
						this[action]();
					}
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.searchDatas();
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.searchDatas();
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				//选择
				formateSelection() {
					var result = [],
					array = this.multipleSelection;
					for(var i = 0; i < array.length; i++) {
						result.push(array[i].Name);
					}
					return result;
				},
				//创建馆藏地
				createLocation() {
					this.createDialog = true;
				},
				//确认创建馆藏地
				confirmCreate(formName) {
					this.$refs[formName].validate((valid) => {
						if(valid) {
							HttpServer.httpPost.call(this, '/Api/LibraryLocation/Create', {
								name: this.createLocationForm.name
							}, function(response) {}, function(response) {
								if(response.data.code === 0) {
									this.createDialog = false;
									this.$notify({
										title: '成功',
										message: this.$t('message.addSuccess'),
										type: 'success',
										duration: 2500
									});
									this.searchDatas();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						} else {
							return false;
						}
					});
				},
				//批量删除馆藏地信息
				deleteLocation() {
					if(this.formateSelection().length > 0) {
						this.$confirm('此操作将删除所选馆藏地信息，是否继续？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							HttpServer.httpPost.call(this, '/Api/LibraryLocation/Delete', {
								name: this.formateSelection()
							}, function(response) {}, function(response) {
								if(response.data.code === 0) {
									this.searchDatas();
									this.$notify({
										title: '成功',
										message: this.$t('message.deleteSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					} else {
						this.$notify({
							title: this.$t('message.warning'),
							message: this.$t('message.selectBulkDeleteWarning'),
							type: 'warning',
							duration: 2500
						});
					}
				},
				// 修改馆藏地信息
				editLocation(row) {
					this.editLocationForm.name = row.Name;
					this.editLocationForm.keyid = row.LocationKeyId;
					this.editDialog = true;
				},
				//确认修改馆藏地信息
				confirmEdit(formName) {
					this.$refs[formName].validate((valid) => {
						if(valid) {
							HttpServer.httpPost.call(this, '/Api/LibraryLocation/UpdateName', {
								info: [this.editLocationForm]
							}, function(response) {}, function(response) {
								if(response.data.code === 0) {
									this.editDialog = false;
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
									this.searchDatas();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						} else {
							return false;
						}
					})
				},
				//详情
				locationDetail(row) {
					row.currentPage = this.currentPage;
					row.pageSize = this.pageSize;
					row.searchModel = this.searchModel;
					this.$emit('changeView', 'Detail', row);
				},
				//去掉时间中的T
				formateData(array) {
					for(var i = 0; i < array.length; i++) {
						var index1 = array[i].CreateTime.indexOf("T");
						var index2 = array[i].UpdateTime.indexOf("T");
						array[i].CreateTime = array[i].CreateTime.substring(0, index1) + " " + array[i].CreateTime.substring(index1 + 1, index1 + 9);
						array[i].UpdateTime = array[i].UpdateTime.substring(0, index2) + " " + array[i].UpdateTime.substring(index2 + 1, index2 + 9);
					}
				},
				//刷新
				reloadDatas() {
					this.isReload = true;
					this.searchDatas();
				},
				searchDatas() {
					this.loading = true;
					HttpServer.httpPost.call(this, '/Api/LibraryLocation/List', {
						UserId: parseInt(GloabFun.getKeyId()),
						index: this.currentPage,
						pagesize: this.pageSize,
						districtid: 0,
						keyword: this.searchModel
					}, function(response) {}, function(response) {
						this.loading = false;
						if(response.data.code === 0) {
							this.formateData(response.data.info);
							this.tableData = response.data.info;
							this.totalSize = response.data.total;

							if(window.localStorage){
								//保存到localStorage
								localStorage.setItem('locationDatas',JSON.stringify({
									data: this.tableData,
									total: this.totalSize,
									index: this.currentPage,
									size: this.pageSize,
									searchModel: this.searchModel})
								);
							}else{
								console.log('This browser does NOT support localStorage')
							}

							if(this.isReload){
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.isReload = false;
					});
				},
				//查询数据
				getDatas() {
					//查询本地是否存在馆藏地的本地缓存数据
					if(localStorage.getItem('locationDatas') != null){
						this.tableData = JSON.parse(localStorage.getItem('locationDatas')).data;
						this.totalSize = JSON.parse(localStorage.getItem('locationDatas')).total;
						this.currentPage = JSON.parse(localStorage.getItem('locationDatas')).index;
						this.pageSize = JSON.parse(localStorage.getItem('locationDatas')).size;
						this.searchModel = JSON.parse(localStorage.getItem('locationDatas')).searchModel;
					}else {
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/LibraryLocation/List', {
							UserId: parseInt(GloabFun.getKeyId()),
							index: this.currentPage,
							pagesize: this.pageSize,
							districtid: 0,
							keyword: this.searchModel
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.formateData(response.data.info);
								this.tableData = response.data.info;
								this.totalSize = response.data.total;

								if(window.localStorage){
									//保存到localStorage
									localStorage.setItem('locationDatas',JSON.stringify({
										data: this.tableData,
										total: this.totalSize,
										index: this.currentPage,
										size: this.pageSize,
										searchModel: this.searchModel})
									);
								}else{
									console.log('This browser does NOT support localStorage')
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}
				}
			},
			created() {
				if(this.templateObj.Name) {
					this.currentPage = this.templateObj.currentPage;
					this.pageSize = this.templateObj.pageSize;
					this.searchModel = this.templateObj.searchModel;
				}
				this.getDatas();
			}
		}
	</script>
	<style scoped lang="less">
		.flex-inline {
			display: flex;
			justify-content: space-between;
			padding-bottom: 2px;
			.query {
				display: flex;
			}
		}

		.name {
			color: #20a0ff;
		}

		.edit-mission {
			padding-top: 50px;
			.el-dialog__header {
				background-color: #000;
			}
			.el-dialog__body {
				position: relative;
			}
			.clearfloat {
				height: 100px;
				max-height: 150px;
			}
		}
	</style>